<template>
  <div>
    <h2 style="margin-top: 30px;color:rgb(192,174,125)">{{ pop }}</h2>
    <div v-for="item in arrp" :key="item.id">
      <div class="pops">
        <img :src="item.img" class="popimg">
        <p class="popname">{{ item.title }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pop: "流行菜单",
      arrp:[],
      arr1: [
        { name: "tiandian", src: "111111", id: 1 },
        { name: "tiandian", src: "22222", id: 2 },
        { name: "tiandian", src: "2221", id: 3 },
      ],
    };
  },
   async mounted() {
    this.$axios("/ly/popcaidan").then((res) => {
      res.data.map((el) => {
        this.arrp.push(el)
      });
    });
  },
};
</script>

<style>
.pops{
    height: 200px;
    width: 300px;
    border: 1px solid blanchedalmond;
    margin-top: 20px;
}
.popimg {
  width: 300px;
  height: 150px;
  background-color: darkgray;
}
.popname {
  text-align: center;
  width: 300px;
  height: 50px;
}
</style>